<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <template>
          <el-divider content-position="left">
            <span style="font-weight: bolder">数字进制转换</span>
          </el-divider>
          <el-radio-group v-model="conversionData.type">
            <el-radio :label="0">二进制</el-radio>
            <el-radio :label="1">八进制</el-radio>
            <el-radio :label="2">十进制</el-radio>
            <el-radio :label="3">十六进制</el-radio>
          </el-radio-group>
          <br />
          <br />
          <el-input
            v-model="conversionData.inputString"
            placeholder="请输入内容"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-right"
              @click="handlerClick"
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-descriptions title="转换结果" :column="1" border>
            <el-descriptions-item
              v-for="output in conversionData.outputList"
              :label="output.labelName"
              :key="output.labelName"
              :labelStyle="{ width: '90px' }"
              :contentStyle="{
                width: '300px',
                overflow: 'hidden',
                'white-space': 'nowrap',
                'text-overflow': 'ellipsis',
              }"
            >
              {{ output.showResult }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-col>
      <el-col :span="8">
        <template>
          <el-divider content-position="left">
            <span style="font-weight: bolder">128bit字符串转字节数组</span>
          </el-divider>
          <el-input
            v-model="bitConData.conString"
            placeholder="16进制串"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-right"
              @click="htArr"
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-input
            v-model="bitConData.conByteArr"
            placeholder="字节数组"
            clearable
          >
            <el-button
              slot="prepend"
              icon="el-icon-back"
              @click="atStr"
            ></el-button>
          </el-input>
          <el-divider content-position="left">
            <span style="font-weight: bolder">编码转换</span>
          </el-divider>
          <el-input
            v-model="unicodeData.codeInputString"
            placeholder="中文字符串"
            clearable
          >
            <el-button
              slot="append"
              icon="el-icon-right"
              @click="encodeUnicode"
            ></el-button>
          </el-input>
          <br />
          <br />
          <el-input
            v-model="unicodeData.codeOutputString"
            placeholder="Unicode编码"
            clearable
          >
            <el-button
              slot="prepend"
              icon="el-icon-back"
              @click="decodeUnicode"
            ></el-button>
          </el-input>
        </template>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Conversion",
  data() {
    return {
      conversionData: {
        type: 2,
        inputString: "",
        outputList: [
          { labelName: "二进制", showResult: "", con: 2 },
          { labelName: "八进制", showResult: "", con: 8 },
          { labelName: "十进制", showResult: "", con: 10 },
          { labelName: "十六进制", showResult: "", con: 16 },
        ],
      },
      bitConData: {
        conString: "",
        conByteArr: "",
      },
      unicodeData: {
        codeInputString: "",
        codeOutputString: "",
      },
    };
  },
  methods: {
    handlerClick() {
      if (this.conversionData.type === 0) {
        this.baseCon(2);
      } else if (this.conversionData.type === 1) {
        this.baseCon(8);
      } else if (this.conversionData.type === 2) {
        this.baseCon(10);
      } else {
        this.baseCon(16);
      }
    },
    baseCon(var1) {
      let temp = 0;
      this.conversionData.outputList.forEach((elem) => {
        this.conversionData.outputList[temp].showResult = parseInt(
          this.conversionData.inputString,
          var1
        ).toString(elem.con);
        temp += 1;
      });
    },
    htArr() {
      this.bitConData.conByteArr = this.hexToArray(
        this.bitConData.conString
      ).toString();
    },
    atStr() {
      let temp = this.bitConData.conByteArr.split(",").map((elem) => {
        return parseInt(elem);
      });
      this.bitConData.conString = this.ArrayToHex(temp);
    },
    hexToArray(str) {
      //16进制串转换成字节数组
      const arr = [];
      for (let i = 0, len = str.length; i < len; i += 2) {
        arr.push(parseInt(str.substr(i, 2), 16));
      }
      return arr;
    },
    ArrayToHex(arr) {
      //字节数组转换成16进制串
      return arr
        .map((item) => {
          item = item.toString(16);
          return item.length === 1 ? "0" + item : item;
        })
        .join("");
    },
    encodeUnicode() {
      //中文转unicode编码
      let res = [];

      for (let i = 0; i < this.unicodeData.codeInputString.length; i++) {
        res[i] = (
          "00" + this.unicodeData.codeInputString.charCodeAt(i).toString(16)
        ).slice(-4);
      }
      this.unicodeData.codeOutputString = "\\u" + res.join("\\u");
    },
    decodeUnicode() {
      //unicode编码转中文
      this.unicodeData.codeInputString = unescape(
        this.unicodeData.codeOutputString.replace(/\\/g, "%")
      );
    },
  },
};
</script>

<style scoped>
.box {
  overflow: hidden;
}
</style>
